<template>
  <div class="auth-contail">
    <van-nav-bar class="header"
                 title="邀请好友"
                 left-arrow
                 @click-left="goBack">
      <span slot="right"
            @click="submit">提交</span>
    </van-nav-bar>
    <div class="weaper">
      <van-cell-group class="fengniao-form form">
        <div class="form-items">
          <van-field center
                     class="form-item"
                     label="姓名"
                     v-model="form.name"
                     placeholder="请输入姓名"
                     :disabled="disabled" />
          <van-select-field center
                            class="form-item"
                            label="关系类型"
                            :dicDisabled="[0]"
                            dic-name="relation"
                            placeholder="选择关系类型"
                            v-model="form.relation"
                            :disabled="disabled" />
          <van-field center
                     class="form-item"
                     label="身份证号"
                     v-model="form.cardNumber"
                     placeholder="请输入身份证号"
                     :disabled="disabled" />
        </div>
        <div class="form-items">
          <van-field center
                     class="form-item"
                     label="预留手机号"
                     v-model="form.phone"
                     :disabled="disabled"
                     placeholder="请输入预留手机号" />
        </div>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { asyncValidator } from '@/util/validate';
import { invitationbind } from '@/api/user';
import { mapGetters } from 'vuex';
import vanSelectField from '@/components/select/main';
import baseCommon from '@/mixins/common';

export default {
  mixins: [baseCommon()],
  components: {
    vanSelectField,
  },
  data () {
    return {
      type: 0,
      disabled: false,
      form: {
        name: '',
        phone: '',
        cardNumber: '',
        houseId: '',
        relation: '',
        roleId: '',
      },
      status: true,
    };
  },
  created () {
    this.init();
  },
  computed: {
    ...mapGetters(['userInfo', 'roles']),
  },
  methods: {
    submit () {
      const rules = {
        name: { type: 'string', required: true, message: '请输入姓名' },
        relation: { type: 'string', required: true, message: '请选择关系类型' },
        phone: { type: 'string', required: true, message: '请输入手机号' },
      };
      asyncValidator(rules, this.form)
        .then(() => invitationbind(this.form))
        .then(() => {
          this.$message.success({
            message: '邀请成功',
            duration: 1500,
          });
          this.goBack();
        })
        .catch((errors) => {
          this.$message.warning({
            message: errors[0].message,
            duration: 1500,
          });
        });
    },
    init () {
      this.form.roleId = this.userInfo.roleId;
      this.form.houseId = this.userInfo.houseId;
    },
  },
};
</script>

<style scoped>
.logout {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 55px;
  border-radius: 0;
}
</style>
